<template>
  <div class="thumb-example">
    <!-- swiper1 -->
    <swiper class="swiper top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide v-for="(item,index) in imgList" :key="index">
        <el-image :src="item" fit="cover"></el-image>
      </swiper-slide>
    </swiper>
    <!-- swiper2 Thumbs -->
    <swiper class="swiper foo" :options="swiperOptionThumbs" ref="swiperThumbs">
      <swiper-slide v-for="(item,index) in imgList" :key="index">
        <el-image :src="item" fit="cover"></el-image>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import SwiperCore, {Controller} from 'swiper'
import 'swiper/swiper-bundle.css'
SwiperCore.use([Controller])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    imgList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      swiperOptionTop: {
        spaceBetween: 10,
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 5,
        touchRatio: 0.2,
        slideToClickedSlide: true,
        watchSlidesVisibility: true,
        // watchSlidesProgress: true
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper
      const swiperThumbs = this.$refs.swiperThumbs.$swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  }
}
</script>

<style lang="less" scoped>
.swiper-container {
  width: 520px;
  &.top {
    width: 520px;
    height: 370px;
  }
  &.foo {
    height: 60px;
    padding: 30px 0 0 0;
  }
  .swiper-slide {
    width: 100%;
    height: 100%;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>